<template>
  <div class="app-container">
    <div>
      <el-form ref="form"
               :model="form"
               label-width="80px"
               inline>
        <el-form-item label="账期">
          <el-date-picker value-format="yyyyMM"
                          v-model="form.acctMonth"
                          style="width: 140px"
                          type="month"
                          placeholder="请选择账期"
                          :picker-options="endDateDisabled"></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <el-cascader clearable
                       v-model="form.areaId"
                       :options="options"
                       ref="cascader"
                       :props="props"
                       :show-all-levels="false"
                       @visible-change="getAreaData"></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery"
                     style="margin-left: 10px">查询</el-button>
          <el-button type="primary"
                     plain
                     @click="exportExcel">导出Excel</el-button>
          <el-button type="primary"
                     plain
                     @click="exportPpt">导出PPT</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName"
             @tab-click="initTable()">
      <el-tab-pane label="码号收入整体概况"
                   name="1">
        <WholeView :form="searchData"
                   ref="WholeView"></WholeView>
      </el-tab-pane>
      <el-tab-pane label="码号收入整体趋势"
                   name="2">
        <OverallTrend :form="searchData"
                      ref="OverallTrend"></OverallTrend>
      </el-tab-pane>
      <el-tab-pane label="经营单元增长情况"
                   name="3">
        <BusinessUnit :form="searchData"
                      ref="BusinessUnit"></BusinessUnit>
      </el-tab-pane>
      <el-tab-pane label="经营单元存量和增量收入完成"
                   name="4">
        <Completion :form="searchData"
                    ref="Completion"></Completion>
      </el-tab-pane>
      <el-tab-pane label="融合套餐收入情况"
                   name="5">
        <FusionTable :form="searchData"
                     ref="FusionTable" />
      </el-tab-pane>
      <el-tab-pane label="公众政企科目环比和同比"
                   name="6">
        <Comparison :form="searchData"
                    ref="Comparison" />
      </el-tab-pane>
      <el-tab-pane label="按汇总科目环比"
                   name="7">
        <Subject :form="searchData"
                 ref="Subject" />
      </el-tab-pane>
      <el-tab-pane label="经营单元按科目环比"
                   name="8">
        <Manage :form="searchData"
                ref="Manage" />
      </el-tab-pane>
      <el-tab-pane label="按来源环比"
                   name="9">
        <HbSource :form="searchData"
                  ref="HbSource" />
      </el-tab-pane>
      <el-tab-pane label="按来源按科目环比"
                   name="10">
        <HbSourceSubject :form="searchData"
                         ref="HbSourceSubject" />
      </el-tab-pane>
      <el-tab-pane label="环比下降支局"
                   name="11">
        <Substation :form="searchData"
                    ref="Substation" />
      </el-tab-pane>
      <el-tab-pane label="环比上升支局"
                   name="12">
        <SubstationUp :form="searchData"
                      ref="SubstationUp" />
      </el-tab-pane>
      <el-tab-pane label="环比下降客户"
                   name="13">
        <CustomerDown :form="searchData"
                      ref="CustomerDown" />
      </el-tab-pane>
      <el-tab-pane label="环比上升客户"
                   name="14">
        <CustomerUp :form="searchData"
                    ref="CustomerUp" />
      </el-tab-pane>
      <el-tab-pane label="环比增长大颗粒资产"
                   name="15">
        <GrainUp :form="searchData"
                 ref="GrainUp" />
      </el-tab-pane>
      <el-tab-pane label="环比降收大颗粒资产"
                   name="16">
        <GrainDown :form="searchData"
                   ref="GrainDown" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { downLoadExcelBody, downLoadPptBody } from "@/utils/zipdownload";
import { mapGetters } from "vuex";
import { roleDeptTreeselecttw } from "@/api/workspace/income";
import { getMaxMonth } from "@/api/barCode/index";
import WholeView from "./components/wholeView.vue";
import OverallTrend from "./components/overallTrend.vue";
import BusinessUnit from "./components/businessUnit.vue";
import Completion from "./components/completion.vue";
import Comparison from "./components/comparison.vue";
import Subject from "./components/subject.vue";
import Manage from "./components/manage.vue";
import HbSource from "./components/hbSource.vue";
import HbSourceSubject from "./components/hbSourceSubject.vue";
import Substation from "./components/substation.vue";
import SubstationUp from "./components/substationUp.vue";
import CustomerDown from "./components/customerDown.vue";
import CustomerUp from "./components/customerUp.vue";
import GrainUp from "./components/grainUp.vue";
import GrainDown from "./components/grainDown.vue";
import FusionTable from "./components/fusionTable.vue";
export default {
  name: "barCode",
  components: {
    WholeView,
    OverallTrend,
    BusinessUnit,
    Completion,
    Comparison,
    Subject,
    Manage,
    HbSource,
    HbSourceSubject,
    Substation,
    SubstationUp,
    CustomerDown,
    CustomerUp,
    GrainUp,
    GrainDown,
    FusionTable
  },
  data () {
    return {
      form: {
        acctMonth: "",
        areaId: ""
      },
      searchData: {
        acctMonth: "",
        areaId: ""
      },
      endDateDisabled: this.pickerDisabled(),
      disabledTime: "",
      options: [],
      props: {
        value: "deptId",
        label: "displayName",
        emitPath: false,
        checkStrictly: true,
        lazy: true,
        lazyLoad (node, resolve) {
          if (node.value) {
            roleDeptTreeselecttw({
              areaId: node.value
            }).then(res => {
              if (res.code == 200) {
                if (node.level == 3) {
                  res.depts.forEach(item => {
                    item.leaf = true;
                  });
                }
                resolve(res.depts);
              }
            });
          }
        }
      },
      activeName: "1"
    };
  },
  computed: {
    ...mapGetters(["deptId", "deptName"])
  },
  created () { },
  mounted () {
    this.getMaxMonths();
  },
  methods: {
    getAreaData (val) {
      if (val == true) {
        let obj = { deptId: this.deptId, displayName: this.deptName };
        let arr = [];
        arr.push(obj);
        this.options = arr;
      }
    },
    pickerDisabled () {
      let e = this;
      return {
        disabledDate: function (t) {
          if (e.disabledTime) {
            var n = t.getFullYear(),
              a = t.getMonth() + 1;
            if (
              (a >= 1 && a <= 9 && (a = "0" + a),
                n.toString() + a.toString() > e.disabledTime)
            ) {
              return !0;
            }
          }
        }
      };
    },
    getMaxMonths () {
      return new Promise(resolve => {
        getMaxMonth().then(res => {
          resolve(res.msg);
          this.form.acctMonth = res.msg;
          this.disabledTime = res.msg;
          var obj = {
            deptId: Number(this.deptId),
            displayName: this.deptName
          };
          let arr = [];
          arr.push(obj);
          this.options = arr;
          this.form.areaId = Number(this.deptId);
          this.handleQuery();
        });
      });
    },
    exportExcel () {
      let nodesInfo = this.$refs["cascader"].getCheckedNodes();
      let obj = Object.assign({}, this.form);
      let fileName =
        obj.acctMonth + "_" + nodesInfo[0].label + "_" + "码号收入分析";
      downLoadExcelBody("/mhIncome/export", obj, fileName);
    },
    exportPpt () {
      let nodesInfo = this.$refs["cascader"].getCheckedNodes();
      let obj = Object.assign({}, this.form);
      let fileName =
        obj.acctMonth + "_" + nodesInfo[0].label + "_" + "码号收入分析";
      downLoadPptBody("/mhIncome/exportPPT", obj, fileName);
    },
    handleQuery () {
      this.searchData.areaId = this.form.areaId;
      this.searchData.acctMonth = this.form.acctMonth;
      this.initTable();
    },
    initTable () {
      const { activeName } = this;
      if (activeName == 1) {
        this.$refs.WholeView.getList();
      } else if (activeName == 2) {
        this.$refs.OverallTrend.getList();
      } else if (activeName == 3) {
        this.$refs.BusinessUnit.getList();
      } else if (activeName == 4) {
        this.$refs.Completion.getList();
      } else if (activeName == 5) {
        this.$refs.FusionTable.getList();
      } else if (activeName == 6) {
        this.$refs.Comparison.getList();
      } else if (activeName == 7) {
        this.$refs.Subject.getList();
      } else if (activeName == 8) {
        this.$refs.Manage.getList();
      } else if (activeName == 9) {
        this.$refs.HbSource.getList();
      } else if (activeName == 10) {
        this.$refs.HbSourceSubject.getList();
      } else if (activeName == 11) {
        this.$refs.Substation.getList();
      } else if (activeName == 12) {
        this.$refs.SubstationUp.getList();
      } else if (activeName == 13) {
        this.$refs.CustomerDown.getList();
      } else if (activeName == 14) {
        this.$refs.CustomerUp.getList();
      } else if (activeName == 15) {
        this.$refs.GrainUp.getList();
      } else if (activeName == 16) {
        this.$refs.GrainDown.getList();
      }
    }
  }
};
</script>
